<template>
    <div class="contentLayout returnVisit">
      <path-tracking :path='path' />
    
      <div class="navContent">
      <el-tabs v-model="checkActiveName" @tab-click="checkHandleClick" class="checkTabNavs tabNavsBig">
        <el-tab-pane label="基本信息" name="basicInfo">
          <!-- <basicInfo :customerInfo="customerInfo" :memberInfo="memberInfo" :orderInfo="orderInfo" :IntegraInfo="IntegraInfo" :expandInfo="expandInfo" @bookInfo="bookInfo" :id="id" :isBuy="isBuy" @seeId="seeId" :isShowId="isShowId" :idCardText="idCardText" :idCardc="idCardc" :tagsInfo='tagsInfo'></basicInfo> -->
          <basicInfo :customerInfo="customerInfo" :memberInfo="memberInfo" :orderInfo="orderInfo" :cardInfo="cardInfo" :IntegraInfo="IntegraInfo" :expandInfo="expandInfo" @bookInfo="bookInfo" :id="id" @seeId="seeId" :isShowId="isShowId" :idCardText="idCardText" :idCardc="idCardc"  :isBuy="isBuy" :tagsInfo='tagsInfo'></basicInfo>
				</el-tab-pane>
								<el-tab-pane label="等级权益" name="classEquity" v-if="isBuy == '是'">
          <levelEquity :levelHistory="levelHistory" :equityData="equityData"></levelEquity>
				</el-tab-pane>
        <el-tab-pane label="定制费账户" name="customizaAccount" v-if="isBuy == '是'">
					<div class="integraLayout">
            <div class="seeIntegra">
              <div class="tableTitle">
                <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                <div class="tableText">定制费总览</div>
              </div>
              <ul>
                <li>
                  <h2>{{totalCustomiza.totalAccount}}</h2>
                  <span>总额</span>
                </li>
                <li>
                  <h2>{{totalCustomiza.remainingAccount}}</h2>
                  <span>余额</span>
                </li>
                <li>
                  <h2>{{totalCustomiza.usedAccount}}</h2>
                  <span>已使用金额</span>
                </li>
              </ul>
            </div>
            <div>
                <div class="tableTitle">
                  <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                  <div class="tableText">定制费明细</div>
                </div>
                <div class="formLayout">
                  <tabelcom
										:total="total"
										:pageSize="pageSize"
										:pageNum='pageNum'
										:pageTotal="pageTotal"
                     :tableData="customizaTableData"
                     :columns="customizaTableH"
                     :isSelection =true
                     :isHide="isHide"
                     @selectedHighlight="selectedHighlight"
                     @handleSelectionChange="handleSelectionChange"
                     @handleSizeChange="handleSizeChange"
                     @handleCurrentChange="handleCurrentChange"
                    ></tabelcom>
                </div>
            </div>
          </div>
				</el-tab-pane>
				<el-tab-pane label="积分账户" name="integraAccount" v-if="isBuy == '是'">
          <div class="integraLayout">
            <div class="seeIntegra">
              <div class="tableTitle">
                <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                <div class="tableText">积分总览</div>
              </div>
              <ul>
                <li>
                  <h2>{{allIntegraData.availableScore}}</h2>
                  <span>可使用积分</span>
                </li>
                <li>
                  <h2>{{allIntegraData.expiringScore}}</h2>
                  <span>即将过期积分</span>
                </li>
                <li>
                  <h2>{{allIntegraData.usedScore}}</h2>
                  <span>已使用积分</span>
                </li>
              </ul>
            </div>
            <div>
                <div class="tableTitle">
                  <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                  <div class="tableText">积分明细</div>
                </div>
                <div class="formLayout">
                  <el-table
                  :data="integraDetailData"
                    >
                    <!-- <el-table-column
                      fixed
                      prop="date"
                      label="变动渠道"
                      width="150">
                    </el-table-column> -->
                    <el-table-column v-for="(item,index) in integraTableH" :label="item.label" 
                    :prop="item.prop" 
                    :key="index"
                    align="center"
                    >
                    </el-table-column>
                    <!-- <el-table-column
                      fixed="right"
                      label="备注"
                      width="100">
                      <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">备注</el-button>
                      </template>
                    </el-table-column> -->
                  </el-table>
                </div>
            </div>
          </div>
					<!-- <basicInfo :basicData="integraAccount"></basicInfo> -->
				</el-tab-pane>
				<el-tab-pane label="卡包账户" name="cardAccount" v-if="isBuy == '是'">
          <cardInfo :cardHistoryData="cardHistoryData" :cardDetailData="cardDetailData" :cardWallet="cardWallet"></cardInfo>
				</el-tab-pane>
				<el-tab-pane label="交易历史" name="transactionHistory" v-if="isBuy == '是'">
					<div class="integraLayout">
            <div class="seeTrade">
              <div class="tableTitle">
                <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                <div class="tableText">交易总览</div>
              </div>
              <ul>
                <li>
                  <h2>{{totalTransact.OrderQty}}</h2>
                  <span>订单数量</span>
                </li>
                <li>
                  <h2>{{totalTransact.TotalAmount}}</h2>
                  <span>订单总金额</span>
                </li>
                <li>
                  <h2>{{totalTransact.ReturnOrderQty}}</h2>
                  <span>退款订单</span>
                </li>
                <li>
                  <h2>{{totalTransact.TotalRefundAmount}}</h2>
                  <span>已退总金额</span>
                </li>
              </ul>
            </div>
            <div>
                <div class="tableTitle">
                  <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                  <div class="tableText">订单明细</div>
                </div>
                <div class="formLayout">
                  <tabelcom
										:total="total"
										:pageSize="pageSize"
										:pageNum='pageNum'
										:pageTotal="pageTotal"
                     :tableData="orderTableData"
                     :isHide="isHide"
                     @selectedHighlight="selectedHighlight"
                     :columns="orderTableH"
                     @handleSelectionChange="handleSelectionChange"
                     @handleSizeChange="handleSizeChange"
                     @handleCurrentChange="handleCurrentChange"
                    ></tabelcom>
                </div>
            </div>
          </div>
				</el-tab-pane>
				<el-tab-pane label="预约信息" name="bookInfo">
          <div class="bookLayout">
              <div class="bookInfoLayout">
                <div class="bookInfo">
                    <div class="tableTitle">
                      <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                      <div class="tableText">预约信息</div>
                    </div>
                    <ul>
                      <li>
                        <label>预约人</label>
                        <span>{{bookingInfo.name}}</span>
                      </li>
                      <li>
                        <label>性别</label>
                        <span>{{bookingInfo.sex}}</span>
                      </li>
                      <li>
                        <label>电话</label>
                        <span>{{bookingInfo.phone}}</span>
                      </li>
                    </ul>
                </div>
                
              </div>
              <div class="remarksHistory bookHistoryLayout" >
                <div class="tableTitle">
                    <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                    <div class="tableText">备注历史</div>
                </div>
                <ul  class="cateul" :class="showAddCategory? 'showdatalistclass': ''">
                  <li v-for="(item,index) in remarkHistory" :key="index">
                    <h2>
                      <label>{{item.createTime}}</label>
                      <span>{{item.content}}</span>
                    </h2>
                    <p>店员:<em>{{item.supportStaff}}</em></p>
                  </li>
                </ul>
                <!--收起 展开-->
                <div class="add_category_button" @click="addCategoryFun" v-show="statusBtn">
                  <img src="@/assets/img/icon_down.png"  v-if="showAddCategory"/>
                  <img src="@/assets/img/icon_up.png" v-else>
                  <span v-if="!showAddCategory">收起</span>
                  <span v-if="showAddCategory">展开</span>
                </div>
              </div>
              
              <!--预约历史次数-->
              <div class="bookList" v-for="(item,index) in bookListArr" :key="index">
                <div class="tableTitle tableTitleBig">
                    <div class="tableIcon"></div>
                    <div class="tableText">{{item.num}}</div>
                </div>
                <div class="basicInfoLayout">
                    <div class="tableTitle">
                      <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                      <div class="tableText">预约信息</div>
                    </div>
                    <ul>-
                      <li>
                        <label>预约单号</label>
                        <span>{{item.reservationInfo.reservationNumber}}</span>
                      </li>
                      <li>
                        <label>预约日期</label>
                        <span>{{item.reservationInfo.reservationStartTime ? item.reservationInfo.reservationStartTime.split(' ')[0] : ''}}</span>
                      </li>
                      <li>
                        <label>预约时段</label>
                        <span>{{item.reservationInfo.reservationStartTime}}至{{item.reservationInfo.reservationEndTime}}</span>
                      </li>
                      <li>
                        <label>预约来源</label>
                        <span>{{item.reservationInfo.source}}</span>
                      </li>
                      <li>
                        <label>预约地区</label>
                        <span>{{item.reservationInfo.area}}</span>
                      </li>
                      <li>
                        <label>预约门店</label>
                        <span>{{item.reservationInfo.shop}}</span>
                      </li>
                    </ul>
                </div>

                <div class="bookHistoryLayout">
                    <!--客服跟进-->
                    <div>
                        <div class="tableTitle">
                            <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                            <div class="tableText">客服跟进历史</div>
                        </div>
                        <ul>
                          <li v-for="(followItem,index) in item.reservationInfo.followUpRecords" :key="index" v-show="followItem.type == '2'">
                            <h2>
                              <label>{{followItem.createTime}}</label>
                              <span>{{followItem.content}}</span>
                            </h2>
                            
                          </li>
                          <!-- <li>
                            <h2 @click="showBtn(index)">
                              <span>展开</span>
                              <img src="@/assets/img/icon_down.png"/>
                            </h2>
                          </li> -->
                        </ul>
                    </div>
                    <!--门店跟进-->
                    <div class="bookHistoryLayout shopHistory" >
                      <div class="tableTitle">
                        <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                        <div class="tableText">门店跟进历史</div>
                      </div>
                      <ul>
                        <li v-for="(followItem,indexFl) in item.reservationInfo.followUpRecords" :key="indexFl" v-show="followItem.type == '3'">
                          <h2>
                            <label>{{followItem.createTime}}</label>
                            <span>{{followItem.content}}</span>
                          </h2>
                          <p>
                            <label>店员:<em>{{followItem.supportStaff}}</em></label>
                            <span>{{followItem.content}}</span>
                          </p>
                        </li>
                        <!-- <li>
                            <h2 @click="showBtn(index)">
                              <span>展开</span>
                              <img src="@/assets/img/icon_down.png"/>
                            </h2>
                          </li> -->
                      </ul>
                  </div>
                </div>
                <div class="bookInfoLayout">
                    <div class="tableTitle">
                      <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
                      <div class="tableText">门店接待信息</div>
                    </div>
                    <ul>
                      <li>
                        <label>是否到店</label>
                        <span v-if="item.reservationInfo.isArrival == true">是</span>
                        <span v-else-if="item.reservationInfo.isArrival == false">否</span>
                      </li>
                      <li v-if="item.reservationInfo.gift">
                        <label>赠送礼物</label>
                        <span>{{item.reservationInfo.gift}}</span>
                      </li>
                      <li>
                        <label>到店时间</label>
                        <span>{{item.reservationInfo.arrivalTime}}</span>
                      </li>
                    </ul>
                </div>

              </div>
          </div>

				</el-tab-pane>
				<el-tab-pane label="回访记录" name="returnVisitRecord">
          <returnRecord :returnRecordData="returnRecordData" @showFile="showFile" @showStatus="showStatus" :indexRecord='indexRecord' :indexn='indexn' :showImg='showImg' :showName="showName" ></returnRecord>
				</el-tab-pane>
        <el-tab-pane label="操作日志" name="operationLog">
          <div class="tableTitle">
            <div class="tableIcon"><img src="@/assets/img/flower_brown.png" alt=""></div>
            <div class="tableText">操作日志</div>
          </div>
          <div class="formLayout">
            <el-table :data="operateLogData">
              <el-table-column 
              v-for="(item,index) in operateLogTableH" 
              :prop="item.prop" 
              :label="item.label" 
              align="center"
              :key="index">
            </el-table-column>
            </el-table>
          </div>
				</el-tab-pane>

      </el-tabs>

    </div>

      <div class="returnInfo">
        <el-row class="rows">
            <el-col :sm="12" :md="8" :lg="6">
                <div class="items" ref="callbackPurpose">
                    <label class="label" for="">
                        <img class="required" src="@/assets/img/flower_red.png" alt="">
                        沟通事由
                    </label>
                    <el-select style="flex:1" class="input-cont"  v-model="callbackPurpose" @change="toSelect">
                        <el-option v-for="(item,index) in options" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                    <!-- <el-select class="input-cont"  v-model="callbackPurpose" @change="toSelect">
                        <el-option v-for="(item,index) in options" :key="index" :label="item.callbackPurpose" :value="item.callbackPurpose"></el-option>
                    </el-select> -->
                </div>
            </el-col>
            <el-col :sm="12" :md="8" :lg="6">
                <div class="items" ref="callbackWay">
                    <label class="label" for="">
                        <img class="required" src="@/assets/img/flower_red.png" alt="">
                        沟通方式
                    </label>
                    <el-select style="flex:1" class="input-cont" v-model="callbackWay" placeholder="请选择内容">
                        <el-option label="电话" value="1"></el-option>
                        <el-option label="微信" value="2"></el-option>
                        <el-option label="短信" value="3"></el-option>
                    </el-select>
                </div>
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col :sm="12" :md="8" :lg="6" v-if="isBuy == '否'">
                <div class="items">
                    <label class="label" for="">
                        购买用途
                    </label>
                    <el-select style="flex:1" class="input-cont" v-model="purchasePurpose" placeholder="请选择内容">
                        <el-option label="请选择内容" value=""></el-option>
                        <el-option label="求婚" value="求婚"></el-option>
                        <el-option label="结婚" value="结婚"></el-option>
                        <el-option label="复购" value="复购"></el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :sm="12" :md="8" :lg="6" v-if="isBuy == '否'">
                <div class="items">
                    <label class="label" for="">
                        未购原因
                    </label>
                    <el-select style="flex:1" class="input-cont" v-model="unpurchasedReason" placeholder="请选择内容">
                        <el-option label="请选择内容" value=""></el-option>
                        <el-option label="款式不喜欢" value="款式不喜欢"></el-option>
                        <el-option label="预算不符合" value="预算不符合"></el-option>
                        <el-option label="想买其它品牌" value="想买其它品牌"></el-option>
                        <el-option label="再看看、再等等" value="再看看、再等等"></el-option>
                        <el-option label="其它事项" value="其它事项"></el-option>
                    </el-select>
                </div>
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col :sm="12" :md="8" :lg="6" v-if="isBuy == '否'">
                <div class="items">
                    <label class="label" for="">
                        客户预算
                    </label>
                    <el-input class="input-cont" type="number" v-model="budget" value=""></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row class="rows basic">
            <el-col>
                <div class="items">
                    <label class="label" for="">
                        注意事项
                    </label>
                    <el-input type="textarea" value="" v-model="noticeContent" :disabled='isDisabled'></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row class="rows basic">
            <el-col>
                <div class="items">
                    <label class="label" for="">
                        沟通话术
                    </label>
                    <el-input type="textarea" value="" v-model="speechcraftContent" :disabled='isDisabled'></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row class="rows basic">
            <el-col>
                <div class="items" ref="callbackDescription">
                    <label class="label" for="">
                      <img class="required" src="@/assets/img/flower_red.png" alt="">
                      沟通详情
                    </label>
                    <el-input type="textarea" value="" v-model="callbackDescription" maxlength='500'></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row class="rows basic upfileInfo">
            <el-col>
                <div class="items">
                    <label class="label" for="">
                      附件
                    </label>
                    <h4 v-if="isShowBtn">
                      <span style="font-size:14px;color:#7e6b5a;float:left">上传附件</span>
                      <img src='@/assets/img/icon_upload.png'/>
                      <input class="upfile" type="file"  @change="upfileChange($event)">
                    </h4>
                    <div class="showFile" v-if="isShowImg">
                        <span style="font-size:14px;color:#7e6b5a;display:block" v-for="(item,index) in fileList" :key="index">{{item}}</span>
                    </div>
                </div>

            </el-col>
        </el-row>
        <div class="formBtnList">
            <button class="sureBtn" @click="toSure">确定</button>
            <button class="cancelBtn" @click="toCancel">取消</button>
        </div>
      </div>

    </div>
</template>
<script>
import pathTracking from '@/components/common/pathTracking'
import basicInfo from '../checkDetail/basicInfo/index'
import cardInfo from '../checkDetail/cardInfo/index'
import levelEquity from '../checkDetail/levelEquity/index' //等级权益
import returnRecord from '../checkDetail/returnRecord/index' //回访记录
import tabelcom from '../../components/pages/table'

import datas from '../checkDetail/datas.js'
import { setTimeout } from 'timers';

export default {
  name: 'returnVisit',
  data(){
    return{
      path: ['CRM', '客户管理', {label: '客户列表', name: 'customerList'}, '回访'],
      checkActiveName: 'basicInfo',
      //basicData:datas.basicData, //基本资料
      classEquity:datas.classEquity, //等级权益
      integraAccount:datas.integraAccount,
      integraTableH:datas.integraTableH,//积分账户
      cardTableH:datas.cardTableH, //卡包账户 卡包明细表格 表头
      cardHistoryH:datas.cardHistoryH, //卡包账户 使用历史表格 表头
      operateLogTableH:datas.operateLogTableH, //操作日志表格表头
      customizaTableH:datas.customizaTableH,//定制费表格表头
      orderTableH:datas.orderTableH,
      showAddCategory: true,
      statusBtn:true,//是否展示收起 展开按钮

      id:'',//用户
      isBuy:'',//是否购买
      isBuyNum:'',//暂时用来区分成交客户和未成交客户
      isShowId:true, //是否显示完成身份证号码
      //isReturnBuy:true,//回访页面 判断是否购买
      isHide:false, //是否显示table组件的按钮
      //isReturn:false, //在回访页面中某些信息是否显示
      idCardText:'查看',
      idCardc:'',

			total:1, //总条数
			pageSize:10, //每页多少条
      pageNum:1,//当前第几页
      pageTotal:1,//总页码

      //查看页面里面的信息
      customerInfo:{},//基本信息
      tagsInfo:[],//基本信息-标签
      memberInfo:{},//基本信息---会员信息
      cardInfo:{},//基本信息---卡券信息
      orderInfo:{},//基本信息 -- 订单信息
      IntegraInfo:{},//基本信息 --积分信息
      expandInfo:{},//基本信息 -- 拓展
      levelHistory:[],//会员等级
      equityData:[],//会员权益
      cardWallet:[], //卡包总览
      cardDetailData:[],//卡包信息
      cardHistoryData:[],//卡包历史信息
      returnRecordData:[],//回访记录
      allIntegraData:{}, //积分总览
      integraDetailData:[],//积分明细
      totalCustomiza:{}, //定制费总览
      customizaTableData:[], //定制费表格内容
      totalTransact:{},//交易订单总览
      orderTableData:[], //交易订单明细
      bookingInfo:{},//预约信息
      remarkHistory:[], //预约信息中的备注历史
      bookListArr:[],//预约次数内容列表
      operateLogData:[],//操作日志
      
      reason:'',
      purpose:'',

      //回访字段
      options:['新注册客户售前回访','二次复购跟进回访','售后客户关怀回访','售后提醒通知回访','活动提醒通知回访','售中提醒通知回访','粉钻预约回访','其他临时回访','客户投诉'],
      callbackWay:'1',
      callbackPurpose:'新注册客户售前回访',
      purchasePurpose:'',
      unpurchasedReason:'',
      budget:'',
      noticeContent:'',
      speechcraftContent:'',
      content:'',
      callbackDescription:'',//沟通详情
      isDisabled:true,
      
      //options:[],//沟通事由
      isShowImg:false,//展示图片
      isShowBtn:true, //展示上传按钮
      attachmentUrl:'',
      fileList:[],
      fileUrlList:[],
      fileUrlStr:'',
      //fileName:'',
      //upLoadStatus:''//文件大小提示

      indexRecord:0,
      indexn:0,
      showImg:false,
      showName:true
    }
  },
  components:{
    cardInfo,
    basicInfo,
    levelEquity,
    returnRecord,
    tabelcom,
    pathTracking
  },
  methods:{
    toJump(){
      this.$router.push({name:'customerList'})
    },
    toCancel(){
      this.$router.replace({name:'customerList'})
    },
    checkHandleClick (tab, event) {
      //console.log('看看选项卡',tab.name);
      // switch(tab.name){
      //   case 'basicInfo': //基本资料
      //       this.getBasicInfo(this.id);
      //       break;
      //   case 'classEquity': //等级权益
      //       this.getMemberLevel(this.id);
      //       this.getMemeberEquity(this.id)
      //       break; 
      //   case 'customizaAccount'://定制费账户
      //       this.getCustomizaTotal(this.id);
      //       this.getCustomizaDetail(this.id);
      //       break; 
      //   case 'integraAccount': //积分账户
      //       this.getIntegraDetail(this.id);
      //       break; 
      //   case 'cardAccount': //卡包账户
      //       this.getCardAllWallet(this.id);
      //       this.getCardInfo(this.id);
      //       break; 
      //   case 'transactionHistory'://交易历史
      //       this.getTransactHistory(this.id);
      //       this.getTransactDetail(this.id)
      //       break; 
      //   case 'bookInfo'://预约信息
      //       this.getBookInfo(this.id);
      //       break; 
      //   case 'returnVisitRecord':
      //       this.getReturnRecord(this.id);//回访记录
      //       break; 
      //   case 'operationLog'://操作日志
      //       this.getOperateLog(this.id);
      //       break; 
      //   default:
      //     //this.getBasicInfo(this.id);
      //     break;
      // }
    },
    toJump(){
      this.$router.push({name:'customerList'})
    },
    toCancel(){
      this.$router.push({name:'customerList'})
    },
    addCategoryFun(){
      this.showAddCategory = !this.showAddCategory;
    },
    bookInfo(){
      this.checkActiveName = "bookInfo"
    },
    //表单验证
    validateData() {
      let regExp = /^[ ]*$/
      //let reg = /^\S{10}$/;//字符长度
      let pass = true;
      regExp.test(this.callbackPurpose) && (pass = false)
      regExp.test(this.callbackWay) && (pass = false)
      regExp.test(this.callbackDescription) && (pass = false)
      // reg.test(this.callbackDescription) && (pass = false)
      // reg.test(this.callbackDescription)&& this.$message({
      //     message: '不能超过500个字',
      //     type: 'warning'
      // })
      regExp.test(this.callbackPurpose) ? this.$refs.callbackPurpose.classList.add('checkedRedInput') : this.$refs.callbackPurpose.classList.remove('checkedRedInput')
      regExp.test(this.callbackWay) ? this.$refs.callbackWay.classList.add('checkedRedInput') : this.$refs.callbackWay.classList.remove('checkedRedInput')
      regExp.test(this.callbackDescription) ? this.$refs.callbackDescription.classList.add('checkedRedInput') : this.$refs.callbackDescription.classList.remove('checkedRedInput')
      return pass
    },
     //展示完整身份证号
    seeId(){
      //console.log('查看有木有')idCardText
      this.isShowId = !this.isShowId;
      if(this.isShowId == true){
        this.idCardText = '查看'
      }else{
        this.idCardText = '隐藏'
      }
    },
     //回访记录 点击图片链接展示图片
    showFile(index,n){
      console.log('回访记录',index,n);
      this.indexRecord = index;
      this.indexn = n ;
      // this.indexRecord = n;
      this.showImg = true
    },
    //点击上传
    upfileChange(el){
        //console.log('$event',el);
        var fileObj = el.target.files[0];
        var fileUrl = el.target.baseURI;
        fileObj.imgUrl = fileUrl
        //console.log('fileUrl',fileUrl)
        console.log('fileObj',fileObj)
        var fileSize = fileObj.size;
        if(fileSize/1024/1024 > 10){
            this.$message({
              message: '文件不能超过10M',
              type: 'warning'
            });
            return;
        }else{
            var form = new FormData();
            form.append("file", fileObj);
            form.append("fileType", '');
            this.uploadImg(this,form);
        }
    },

    //上传图片
    uploadImg(that,formData) {
        that.$ajax({
		    method: 'post',
        //url:'/api/base/file/uploadOne',
        url:api.base + '/file/uploadOne',
		    data:formData
	    }).then((res)=>{
            var data = res.data;
            if(data.status == 200){
                //console.log('附件上传成功了！可喜可贺，喜大普奔',data.result);
                that.isShowImg = true;
                that.fileList.push(data.result.originalName);//展示名字
                that.fileUrlList.push(data.result.url)
                that.fileUrlStr = that.fileUrlList.join(',');
                that.$message({
                    message: '附件上传成功',
                    type: 'success'
                });
            }else{
              that.$message({
                  message: '附件上传失败',
                  type: 'warning'
              });
            }
        }).catch((err) => {
            console.log('没成功！死命上传',err);
            that.$message({
                message: '附件上传失败',
                type: 'warning'
            });
        })
    },

    handleSelectionChange (selection) {
      // 选中的数组
      //this.TableSelectData = selection
    },
    selectedHighlight (data) {
      // 如果选中则添加高亮样式
      if (this.TableSelectData.indexOf(data.row) > -1) {
        return {
          'background-color': '#FEF6EE'
        }
        return {}
      }
    },
    // 分页
    handleSizeChange (val) { //每页多少条
      this.pageSize = val;
      this.getCustomizaDetail(this.id);
    },
    handleCurrentChange (val) { //当前第几页
      this.pageNum = val;
      this.getCustomizaDetail(this.id)
    },

    //获取预约信息
    getBookInfo(id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiIntegra + '/customerInfo/findReservationInfo?id=' + id,
        url:api.crm + '/customerInfo/findReservationInfo?id=' + id,
      }).then((res) => {
        console.log('预约信息',res);
        var data = res.data;
        that.remarkHistory = [];

        if(data.status == 200){
          that.bookingInfo = data.result; //预约信息
          var remarkRecords = data.result.followUpRecords//备注历史
          if(remarkRecords){
            that.statusBtn = false
            that.remarkHistory = remarkRecords 
          }else{
            that.statusBtn = false
          }
          var bookList = data.result.cReservationResps;//预约列表
          if(bookList){
            that.bookListArr = bookList
          }
            
        }

      })
    },

    //获取基本信息
    getBasicInfo(id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/customerInfo/' + id,
        url:api.crm + '/customerInfo/' + id,
      }).then((res) => {
        console.log('客户基本详情',res.data);
        var data = res.data;
        if(data.status == 200){
          //console.log('客户信息-卡包',data.result.cardInfoVo)
          that.memberInfo = data.result.memberInfoVo; //会员信息
          that.orderInfo = data.result.orderTotalDTO; //订单信息
          that.cardInfo = data.result.cardInfoVo;//卡券信息
          that.IntegraInfo = data.result.scoreInfoVo; //积分
          that.expandInfo = data.result.expandInfoVo; //拓展
          that.customerInfo = data.result.customerInfo;
          that.tagsInfo = data.result.customerInfo.systemTagCategoryVO.systemTagGroups;
          var idCard = data.result.customerInfo.idCard;
          var idCarda = idCard.substring(0,3);
          var idCardb = idCard.substring(idCard.length-3);
          if(idCard !== ''){
            that.idCardc = idCarda + '****' +idCardb;
          }
        }else{
          // that.$message({
          //   message: '获取基本信息数据失败',
          //   type: 'warning'
          // });
        }
      }).catch((err) => {
        //  that.$message({
        //     message: err.data.msg,
        //     type: 'warning'
        //   });
      })
    },

    //获取会员等级数据
    getMemberLevel(id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/levelInfo/record/customer/' + id,
        url:api.crm + '/levelInfo/record/customer/' + id,
      }).then((res) => {
        var data = res.data;
        //console.log('等级权益信息',data)
        if(data.status == 200){
          that.levelHistory = [];
          var levelArr = data.result;
          if(levelArr){
            var levelObj = {};
            for(var i =0;i<levelArr.length;i++){
              levelObj = {
                //currentLevel:levelArr[i].currentLevel,
                originalLevel:levelArr[i].originalLevel,
                createTime:levelArr[i].createTime,
                currentLevel:levelArr[i].currentLevel
              }
              //console.log('currentLevel',levelArr[i].currentLevel);
              if(levelArr[i].currentLevel == '1'){
                levelObj.currentLevel == 'v1'
              }else if(levelArr[i].currentLevel == '2'){
                levelObj.currentLevel == 'v2'
              }else if(levelArr[i].currentLevel == '3'){
                levelObj.currentLevel == 'v3'
              }else if(levelArr[i].currentLevel == '4'){
                levelObj.currentLevel == 'v4'
              }else if(levelArr[i].currentLevel == '5'){
                levelObj.currentLevel == 'v5'
              }

              that.levelHistory.push(levelObj)
            }
            //console.log('levelHistory',that.levelHistory)
          }
        }
      })
    },

    //获取会员权益数据
    getMemeberEquity(id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/rightsConf/record/rights/' + id,
        url:api.crm + '/rightsConf/record/rights/' + id,
      }).then((res) => {
        console.log('会员权益',res.data);
        var data = res.data;
        var equityArr = data.result;
        var equityObj = {};
        if(data.status == 200){
          if(equityArr){
            for(var i =0;i<equityArr.length;i++){
              equityObj = {
                name:equityArr[i].name
              }
              that.equityData.push(equityObj)
            }
          }
        }
      })
    },

    //获取定制费用户总览
    getCustomizaTotal(id){
      var that = this;
      that.$ajax({
        method:'GET',
        url:api.crm + '/accountRecord/getTotalAccount/' + id,
        //url:that.apiCrm + '/accountRecord/getTotalAccount/' + id,
      }).then((res) => {
        var data = res.data;
        if(data.status == 200){
          that.totalCustomiza = data.result
        }else{

        }
      })
    },
    //获取定制费详情
    getCustomizaDetail(id){
      var that = this;
      that.pageNum = 1;
      that.pageSize = 10;
      this.$ajax({
        //url:that.apiCrm + '/accountRecord/querylist/' + that.pageSize + '/'+ that.pageNum,
        url:api.crm + '/accountRecord/querylist/' + that.pageSize + '/'+ that.pageNum,
				method:'POST',
				data:{accoutType:'2',customerId:1802619},
			}).then((res) => {
        console.log('定制费明细',res.data);
        var data = res.data;
        that.customizaTableData = []
        if(data.status == 200){
          that.total = data.result.total;  //全部条数
          that.pageNum = data.result.pageNum; //当前页
          that.pageSize = data.result.pageSize; //每页数量
          that.pageTotal = data.result.pages; //总页数
          var customizaArr = data.result.list;
          if(customizaArr){
            var tdObj = {};
            for(var i=0;i<customizaArr.length;i++){
              tdObj = {
                changingWay:customizaArr[i].changingWay,//渠道
                changingReason:customizaArr[i].changingReason,//原因
                orderId:customizaArr[i].orderId,
                changingAccount:customizaArr[i].changingAccount,//变动金钱
                createTime:customizaArr[i].createTime,
                operatingPersonnel:customizaArr[i].operatingPersonnel,//操作人
                remark:customizaArr[i].remark,
              }
              that.customizaTableData.push(tdObj)
            }
          }
          
        }
      })
    },

    //获取积分账户数据
    getIntegraDetail(id){
      //console.log('用户id',id)
      var that = this;
      that.$ajax({
        method:'GET',
        url:api.crm + '/accountRecord/getScoreDetailById?id=' + id,
        //url:'/api/accountRecord/getScoreDetailById?id=' + id,
      }).then((res) => {
        var data = res.data;
        if(data.status == 200){
          that.integraDetailData =[]
          if(data.result){
            that.allIntegraData = data.result;
            var integraDetail = data.result.accountRecords;
            var detailObj = {}
            for(var i=0;i<integraDetail.length;i++){
              detailObj = {
                changingWay:integraDetail[i].changingWay, //变动渠道
                changingReason:integraDetail[i].changingReason, //变动原因
                changingDate:integraDetail[i].changingDate,//变动时间
                changingAccount:integraDetail[i].changingAccount,//变动积分
                remainingAccount:integraDetail[i].remainingAccount,//剩余积分
                orderId:integraDetail[i].orderId,//订单编号
                status:integraDetail[i].status,//状态
                purpose:integraDetail[i].purpose,//用途
                effectiveDateStart:integraDetail[i].effectiveDateStart,//生效时间
                effectiveDateEnd:integraDetail[i].effectiveDateEnd,//过期时间
                operatingPersonnel:integraDetail[i].operatingPersonnel,//操作人
                remark:integraDetail[i].remark//备注
              }
              if(integraDetail[i].status == 0){
                  detailObj.status = '未激活'
              }else if(integraDetail[i].status == 1){
                  detailObj.status = '未使用完'
              }else if(integraDetail[i].status == 2){
                  detailObj.status = '使用完'
              }
              that.integraDetailData.push(detailObj);
            }
          }
          
        }
      })
    },

    //获取卡包总览数据
    getCardAllWallet(id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/cardHolderInfo/preview/' + id,
        url:api.crm + '/cardHolderInfo/preview/' + id,
      }).then((res) => {
        that.cardWallet = [];
        //console.log('卡包总览',res);
        if(res.data.status == 200){
          let cardAllWallet = res.data.result; //卡包总览Arr
          if(cardAllWallet.length > 0){
            var liObj = {};
            //console.log('list',cardAllWallet)
            for(var i =0;i<cardAllWallet.length;i++){

              liObj = {
                count:cardAllWallet[i].count
              }
              if(cardAllWallet[i].status == 1){
                liObj.status = '可用卡券';
                liObj.id = 1
              }else if(cardAllWallet[i].status == 2){
                liObj.status = '已使用卡券';
                liObj.id = 2
              }else if(cardAllWallet[i].status == 3){
                liObj.status = '已过期卡券';
                liObj.id = 3
              }
              that.cardWallet.push(liObj);
              //console.log('lijdsjdlaskdlsak',that.cardWallet)
            }
          }
        }
      })
      .catch((msg) => {
        console.log('失败了',msg)
      })
    },

    //获取卡包信息数据
    getCardInfo(id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/cardHolderInfo/record/' + id,
        url:api.crm + '/cardHolderInfo/record/' + id,
      }).then((res) => {
        var data = res.data;
        //console.log('卡包详情',res.data.result);
        if(data.status == 200){
          that.cardDetailData = []
          var detailArr = data.result.detail;//卡包明细
          if(detailArr){
              //console.log('arr',detailArr)
              var tdObj = {};
              for(var i =0;i<detailArr.length;i++){
                //console.log('hahah',detailArr[i].status)
                tdObj = {
                  getWay:detailArr[i].getWay,
                  getReason:detailArr[i].getReason,
                  getDate:detailArr[i].getDate,//时间
                  //cardType:detailArr[i].cardType, //类型
                  cardDetail:detailArr[i].cardDetail,//卡券明细
                  effectiveDate:detailArr[i].effectiveDate,//生效时间
                  overdueDate:detailArr[i].overdueDate,//过期时间
                  operatingPersonnel:detailArr[i].operatingPersonnel,//操作人
                  //status:detailArr[i].status //状态
                }
                if(detailArr[i].cardType == '1'){
                  tdObj.cardType = 'DR优惠卡'
                }else if(detailArr[i].cardType == '2'){
                  tdObj.cardType = '消费券'
                }else if(detailArr[i].cardType == '3'){
                  tdObj.cardType = '邀新券'
                }else if(detailArr[i].cardType == '4'){
                  tdObj.cardType = '礼品券'
                }else if(detailArr[i].cardType == '5'){
                  tdObj.cardType = '钻石券'
                }
                if(detailArr[i].status == 1){
                  tdObj.status = '正常'
                }else if(detailArr[i].status == 2){
                  tdObj.status = '已使用'
                }else{
                  tdObj.status = '已过期'
                }
                that.cardDetailData.push(tdObj)
              }
              //console.log('2222',this.cardDetailData)
            }
          }

          var usedRecord = data.result.used; //使用历史
          //console.log('卡包历史',usedRecord)
          if(usedRecord){
            var tdHisObj = {};
            for(var i=0;i<usedRecord.length;i++){
              tdHisObj = {
                usedWay:usedRecord[i].usedWay,
                purpose:usedRecord[i].purpose,
                orderId:usedRecord[i].orderId,
                cardType:usedRecord[i].cardType,
                cardDetail:usedRecord[i].cardDetail,
                createTime:usedRecord[i].createTime,
                operatingPersonnel:usedRecord[i].operatingPersonnel,
              }
              that.cardHistoryData.push(tdHisObj)
            }
          }
         
      })
    },

    //交易历史 transactionHistory
    getTransactHistory(id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/orderRecord/queryOrderTotal/' + id,
        url: api.crm + '/orderRecord/queryOrderTotal/' + id,
      }).then((res) => {   
        console.log('交易历史都说了',res.data);
        if(res.data.status == 200){
          var transactInfo = res.data.result;
          if(transactInfo.OrderQty == null){
            transactInfo.OrderQty = 0
          }
          if(transactInfo.TotalAmount == null){
            transactInfo.TotalAmount = 0
          }
          if(transactInfo.ReturnOrderQty == null){
            transactInfo.ReturnOrderQty = 0
          }
          if(transactInfo.TotalRefundAmount == null){
            transactInfo.TotalRefundAmount = 0
          }
          that.totalTransact = res.data.result;

        }
      })
    },

    //获取交易明细
    getTransactDetail(id){
      var that = this;
      that.pageNum = 1;
      that.pageSize = 10;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/orderRecord/queryOrderDetail/1802619',
        url: api.crm + '/orderRecord/queryOrderDetail/' + that.pageSize + '/'+ that.pageNum + '/1802619',
      }).then((res) => {  
        console.log('交易明细',res);
        that.orderTableData = []
        var data = res.data;
        if(data.status == 200){
          that.total = data.result.total;  //全部条数
          that.pageNum = data.result.pageNum; //当前页
          that.pageSize = data.result.pageSize; //每页数量
          that.pageTotal = data.result.pages; //总页数
          var tdObj = {};
          var detailArr = data.result.list;
          for(var i=0;i<detailArr.length;i++){
            tdObj = {
              ChannelName:detailArr[i].ChannelName, //渠道
              OrderID:detailArr[i].OrderID,//订单编号
              //ReturnOrderID:detailArr[i].ReturnOrderID,//退货单号
              PayState:detailArr[i].PayState,
              Amount:detailArr[i].Amount,//订单金额
              DiscountAmount:detailArr[i].DiscountAmount,//优惠金额
              PayableAmount:detailArr[i].PayableAmount,//应付金额
              //OrderState:detailArr[i].OrderState, //少了订单状态
              OrderTime:detailArr[i].OrderTime, //下单时间
              FirstPayTime:detailArr[i].FirstPayTime, //支付时间
              PaidAmount:detailArr[i].PaidAmount, //支付金额
              RefundAmount:detailArr[i].RefundAmount, //退货单
            }
            var orderState = detailArr[i].OrderState;
            if(orderState == 100){
              tdObj.OrderState = '待审批'
            }else if(orderState == 200){
              tdObj.OrderState = '已审批'
            }else if(orderState == 700){
              tdObj.OrderState = '已发货'
            }else if(orderState == 800){
              tdObj.OrderState = '已发货'
            }else if(orderState == 900){
              tdObj.OrderState = '已作废'
            }else if(orderState == 0){
              tdObj.OrderState = '待付款'
            }else if(orderState == 1){
              tdObj.OrderState = '部分付款'
            }else if(orderState == 200){
              tdObj.OrderState = '已付款'
            }

            if(detailArr[i].PayState == 0){
              tdObj.PayState = '待付款'
            }else if(detailArr[i].PayState == 1){
              tdObj.PayState = '部分付款'
            }else if(detailArr[i].PayState == 2){
              tdObj.PayState = '已付款'
            }
            that.orderTableData.push(tdObj)
          }
        } 
        

      })
    },

    //回访记录数据
    getReturnRecord(id){
      var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiCrm + '/callbackRecord/' + id,
        url: api.crm + '/callbackRecord/' + id,
      }).then((res) => {    
        console.log('回访记录',res.data);
        var data = res.data;
        that.returnRecordData = []
        if(data.status == 200){
          var returnRecord = data.result;
          //var recordObj = {};
          if(returnRecord){
            that.returnRecordData = returnRecord
          }
        }
      })
    },
    
    //操作日志
    getOperateLog(id){
       var that = this;
      that.$ajax({
        method:'GET',
        //url:that.apiIntegra + '/operationLog/customer?customerId=' + id,
        url: api.crm + '/operationLog/customer?customerId=' + id,
      }).then((res) => {    
        console.log('操作日志',res);
        that.operateLogData = [];
        var data = res.data;
        if(data.status == 200){
          var logArr = data.result;
          var logObj = {}
          if(logArr){
            for(var i=0;i<logArr.length;i++){
              logObj = {
                operatingPersonnel:logArr[i].operatingPersonnel,//操作人
                type:logArr[i].type,//变动类型
                content:logArr[i].content,//变动内容
                operatingDate:logArr[i].operatingDate,//变动时间
              }
              that.operateLogData.push(logObj)
            }
          }
        }
      })
    },  

    //回访话术
    /*getReturnTalk(customerClassify){
      var that = this;
      that.$ajax({
        method:'GET',
        url: api.crm + '/speechcraftInfo/getCallbackPurpose?customerClassify='+ customerClassify,
      }).then((res) => { 
        console.log('回访话术',res);
        if(res.data.status == 200){
          that.options = res.data.result;
          that.$ajax({
            method:'POST',
            url:api.crm + '/speechcraftInfo/getNoticeAndSpeechcraft',
            data:{
              customerClassify:customerClassify,
              callbackPurpose:'客户关怀',
            }
          }).then((res) => {
              var data = res.data;
              if(data.status == 200){
                this.speechcraftContent = data.result.speechcraftContent;
                this.noticeContent = data.result.noticeContent
              }
          })
        }
      })
    },*/
    getReturnTalk(customerClassify){
      var that = this;
      that.$ajax({
        method:'POST',
        url:api.crm + '/speechcraftInfo/getNoticeAndSpeechcraft',
        data:{
          customerClassify:customerClassify,
          callbackPurpose:'新注册客户售前回访',
        }
      }).then((res) => {
          var data = res.data;
          if(data.status == 200){
            this.speechcraftContent = data.result.speechcraftContent;
            this.noticeContent = data.result.noticeContent
          }
      })
    },
    toSelect(){
      var selectObj = {
        customerClassify:this.isBuyNum,
        callbackPurpose:this.callbackPurpose,
      };
      //console.log('selectObj',selectObj)
      this.$ajax({
        method:'POST',
        url:api.crm + '/speechcraftInfo/getNoticeAndSpeechcraft',
        data:selectObj
      }).then((res) => {
          console.log('选择沟通事由',res);
          var data = res.data;
          if(data.status == 200){
            this.speechcraftContent = data.result.speechcraftContent;
            this.noticeContent = data.result.noticeContent
          }
      })

    },
    //点击确定
    toSure(){
      if(!this.validateData()){
        this.$message({
            message: '内容不能为空',
            type: 'warning'
        });
        return
      }
      var that = this;
      var obj = {
        customerId:that.id,
        callbackReason:that.callbackPurpose, //沟通事由
        callbackWay:that.callbackWay,//沟通方式
        callbackDescription:that.callbackDescription,//详情
        attachmentUrl:that.fileUrlStr,
        purchasePurpose:that.purchasePurpose, //购买用途
        unpurchasedReason:that.unpurchasedReason, //未购买原因
        budget:that.budget //预算
      };
      that.$ajax({
        method:'POST',
        url:api.crm + '/callbackRecord',
        data:obj
      }).then((res) => {
        if(res.data.status == 200){
          that.$message({
              message: '新建回访成功',
              type: 'success'
          });
          setTimeout(function(){
            that.clearData();
            that.$router.replace({name:'customerList'})
          },2000)
        }else{
          that.$message({
              message: res.data.msg,
              type: 'warning'
          });
        }
      }).catch((err) => {
        that.$message({
              message: '新建回访失败',
              type: 'warning'
          });
      })
    },

    clearData(){
      this.customerInfo = {}
      this.speechcraftContent = ''//话术
      this.budget =''//预算
      this.noticeContent = ''
      this.callbackDescription =''//详情
      this.fileList =[]
      this.purchasePurpose ='' //购买用途
      this.unpurchasedReason = '' //未购买原因
    },
    showStatus(index,n){
      this.indexRecord = index;
      this.indexn = n;
      this.showImg = true
    },
    initData() {
      this.id = this.$route.query.id;
      this.isBuy = this.$route.query.isBuy;
      this.isBuyNum = this.$route.query.isBuy;//isBuyNum暂时先用来表示 未成交客户，已成交客户
      if(this.isBuyNum == '是'){
        this.isBuyNum = 1
      }else{
        this.isBuyNum = 0
      }
      this.getMemberLevel(this.id);
      this.getMemeberEquity(this.id)
      this.getCardAllWallet(this.id);
      this.getCardInfo(this.id);
      this.getReturnRecord(this.id);
      this.getCustomizaTotal(this.id);
      this.getCustomizaDetail(this.id);
      this.getIntegraDetail(this.id);
      this.getTransactHistory(this.id);
      this.getTransactDetail(this.id);
      this.getBasicInfo(this.id);
      this.getBookInfo(this.id);
      this.getOperateLog(this.id)
      this.getReturnTalk(this.isBuyNum)
      }
    },
    activated() {
      this.checkActiveName = 'basicInfo'
      this.clearData();
      this.initData()
    },
  created(){
    this.initData()
  }
}
</script>

<style>
@import '../../components/css/viewCommon.css';
.returnInfo .el-textarea__inner{
  height: 160px;
}
</style>
<style scoped>
.contentLayout .navContent {
    margin-top: 0;
}
.upfileInfo h4{
  position:relative
}
.upfileInfo h4:hover{
  cursor:pointer
}
.upfileInfo h4 img{
  position:relative;
  top:-4px
}
.formLayout{
  margin: 0 0 10px 0;
  background-color: #fff;
  /* padding: 24px; */
  border-radius :8px;
}
.returnInfo{
    margin-left:16px;
    margin-right:16px;
    background-color:#fff;
    padding:24px;
    border-radius:8px
}
.contentLayout .navContent{
    padding-bottom:0px
}
.basic .items{
  align-items:initial
}

.integraLayout{
  background-color: #fff
}
/*积分*/
.seeIntegra ul,.seeTrade ul{
  display: flex;
  justify-content: center;
  height: 98px;
}
.seeIntegra ul li,.seeTrade ul li{
  width: 250px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-right: 22px;
  color: #fff;
  padding: 18px 0;
  border-radius: 8px
}
.seeIntegra ul li:first-child{
    background-image: linear-gradient(-90deg, 	#9db919 0%, 	#bcc92b 100%), linear-gradient(#ffffff, #ffffff);
    background-blend-mode: normal, normal;
}
.seeIntegra ul li:nth-child(2){
    background-image: linear-gradient(-90deg, #d85c30 0%, #e87d26 100%),
    linear-gradient( #e67828, #e67828);
    background-blend-mode: normal, normal;
}

.seeIntegra ul li:nth-child(3){
    background-image: linear-gradient(-90deg, #eab71b 0%, #edcb2a 100%),
    linear-gradient(#eab91d, #eab91d);
    background-blend-mode: normal, normal;
}
.seeIntegra ul li:last-child,seeTrade ul li:last-child{
      margin-right: 0
}
.seeIntegra ul li h2,.seeTrade ul li h2{
    font-size: 30px;
    /* margin-bottom: 26px; */
}
.seeIntegra ul li span,.seeTrade ul li span{
    color: #fff;
    font-size: 14px;
}
/*交易账户*/
.seeTrade ul li:first-child{
  background-image: linear-gradient(-90deg, #9db919 0%,	#bcc92b 100%), linear-gradient(	#ffffff,#ffffff);
	background-blend-mode: normal, normal;
}
.seeTrade ul li:nth-child(2){
  background-image: linear-gradient(-90deg, 	#eab71b 0%,#edcb2a 100%),linear-gradient(#e67828, #e67828);
	background-blend-mode: normal, normal;
}
.seeTrade ul li:nth-child(3){
  background-image: linear-gradient(-90deg, #d85c30 0%, #e87d26 100%), linear-gradient(	#eab91d,#eab91d);
	background-blend-mode: normal, normal;
}
.seeTrade ul li:nth-child(4){
  background-image: linear-gradient(-90deg, #bc3f3f 0%,	#e75a5a 100%), linear-gradient(	#eab91d, #eab91d);
	background-blend-mode: normal, normal;
}

/*预约信息*/
.bookLayout,.bookInfoLayout{
  background-color: #fff;
  padding-bottom: 24px
}
.bookInfoLayout ul,.bookHistoryLayout ul{
  background-color: #fff;
  padding: 0 24px
}
.bookInfoLayout ul li{
  width: 24%;
  display: inline-block;
  font-size: 14px
}
.bookInfoLayout ul li label{
  color: #888;
}
.bookInfoLayout ul li span{
  color: #222;
}

.bookHistoryLayout ul li h2{
  margin-bottom: 20px
}
.bookHistoryLayout ul li h2 label{
  color: #888;
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  font-size: 14px;
  display: inline-block;
  margin-right: 48px;
  width: 140px;
  text-align: right
}
.bookHistoryLayout ul li h2 span{
  color: #222;
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.bookHistoryLayout ul li{
  margin-bottom: 24px
}
.remarksHistory ul li p{
  text-align: right;
  color: #888;
  font-size: 14px
}
.remarksHistory ul li p{
  width: 140px;
}
/*首次预约*/
.tableTitle.tableTitleBig{
  height: 40px;
}
.tableTitle.tableTitleBig .tableText{
  font-size: 16px;
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  color: #222;
  font-weight: normal;
}
.bookList .basicInfoLayout ul li{
  width: 24%
}
.bookList{
  border-top: 1px #f3f3f3 solid;
}
.shopHistory ul li p{
  font-size: 14px;
}
.shopHistory ul li p label{
  display: inline-block;
  width: 140px;
  text-align: right;
  margin-right: 48px;
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  color: #888
}

.add_category_button{
  text-align: center;
  line-height: 30px;
  transition: all 400ms;
  font-family: "Microsoft YaHei","微软雅黑","Microsoft JhengHei","华文细黑",STHeiti,MingLiu,'Avenir', Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #7e6b5a;
  font-family: "Microsoft Yahei",sans-serif;
  margin: 14px 0 20px 0;
}

.add_category_button:hover {
  cursor: pointer;
}

.cateul{
  height: auto;
  transition: height 0.5s;
  overflow: hidden;
}
.showdatalistclass{
  height: 60px;
  overflow: hidden;
}
.returnVisit .upfile{
    opacity: 0;
    position: absolute;
    top: 0;
    width: 90px;
    /* background:url('../../../../../assets/img/icon_upload.png') no-repeat center center; */
} 

</style>
